<template>
	<view>
		<!-- 未申请 -->
		<view class="body" v-if="userInfo.state === 0 && applyInfo.state === 3">
			<!-- 申请表单 -->
			<view class="form-section">
				<view class="form-item">
					<text>姓名：</text>
					<input type="text" v-model="name" placeholder="请输入你的姓名" maxlength="11"/>
				</view>
				
				<view class="form-item">
					<text>学号：</text>
					<input type="text" v-model="studentNum" placeholder="请输入你的学号" maxlength="13"/>
				</view>
				
				<!-- 证件上传区域 -->
				<view class="upload-section">
					<text>相关证件证明：</text>
					<view class="upload-box" @tap="uploadStudentCard" v-if="!student_card_pic">
						<text>+</text>
					</view>
					<image v-else :src="student_card_pic" mode="aspectFit" class="preview-image"></image>
				</view>
				
				<button class="submitBtn" @click="submitForm">提交申请</button>
			</view>
		</view>

		<!-- 申请中 -->
		<view v-if="userInfo.state === 0 && applyInfo.state === 0" class="info">
			<view style="text-align: center; font-size: 36rpx; font-weight: 600;">
				申请信息
			</view>
			<view>
				姓名：{{ applyInfo.name }}
				<text class="status-tag">申请中</text>
			</view>
			<view>
				学号：{{ applyInfo.studentNum }}
			</view>
			<view>
				学生证：
				<image :src="applyInfo.student_crad_pic" mode="widthFix" class="student-card-img"/>
			</view>
		</view>

		<!-- 申请通过 -->
		<view v-if="userInfo.state === 1 && applyInfo.state === 1" class="info">
			<view style="text-align: center; font-size: 36rpx; font-weight: 600;">
				申请已通过
			</view>
			<view>
				学号：{{ applyInfo.studentNum }}
			</view>
			<view>
				学生证：
				<image :src="applyInfo.student_crad_pic" mode="widthFix" class="student-card-img"/>
			</view>
		</view>

		<!-- 申请失败 -->
		<view v-if="userInfo.state === 0 && applyInfo.state === 2" class="info">
			<view style="text-align: center; font-size: 36rpx; font-weight: 600;">
				申请未通过
			</view>
			<view>
				学号：{{ applyInfo.studentNum }}
			</view>
			<view>
				学生证：
				<image :src="applyInfo.student_crad_pic" mode="widthFix" class="student-card-img"/>
			</view>
		</view>
	</view>
</template>

<script>
import { applyAdd } from '@/api/index.js'
import { applyStatue } from '@/api/index.js'
import { userInfo } from 'os';
export default {
	data() {
		return {
			userInfo: null,
			applyInfo: {
				state: 3,
				status: 0
			},
			name: '',
			studentNum: '',
			student_card_pic: ''
		}
	},
	created(){
		this.userInfo = uni.getStorageSync("userInfo") || { state: 0 }
		this.getApply()
	},
	methods: {
		//获取申请状态
		getApply(){
			applyStatue(this.userInfo.id).then(res => {
				console.log(res, '申请状态');
				if(res.data.status === 0) {
					if(res.data.apply && res.data.apply.length > 0) {
						this.applyInfo = res.data.apply[0];
					}
					// 根据状态显示对应提示
					if(this.userInfo.state === 0 && this.applyInfo.state === 3) {
						// 未申请
						uni.showToast({
							title: '请提交申请',
							icon: 'none'
						});
					} else if(this.userInfo.state === 0 && this.applyInfo.state === 0) {
						// 申请中
						uni.showToast({
							title: '正在申请中',
							icon: 'none'
						});
					} else if(this.userInfo.state === 1 && this.applyInfo.state === 1) {
						// 申请通过
						uni.showToast({
							title: '申请已通过',
							icon: 'success'
						});
					} else if(this.userInfo.state === 0 && this.applyInfo.state === 2) {
						// 申请未通过
						uni.showToast({
							title: '申请未通过，请重新提交',
							icon: 'none'
						});
					}
				}
			}).catch(err => {
				console.error('获取申请状态失败：', err);
				// 设置默认状态，确保界面显示
				this.applyInfo.state = 1;
			})
		},
		uploadStudentCard() {
			uni.chooseImage({
				count: 1,
				type: "image",
				success: (res) => {
					console.log(res, '选择的图片');
					let imageUrl = res.tempFiles[0].path;
					console.log(imageUrl, '图片路径');
					
					// 上传图片到服务器
					uni.uploadFile({
						url: "http://8.140.198.52:8001/common/uploadFile",
						filePath: imageUrl,
						name: 'file',
						header: {
							'content-Type': 'multipart/form-data',
							'Authorization': uni.getStorageSync('token')
						},
						success: (res) => {
							console.log(res, '上传图片在服务器地址');
							this.student_card_pic = res.data;
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							});
						},
						fail: (err) => {
							uni.showToast({
								title: '上传失败',
								icon: 'error'
							});
							console.error('上传失败：', err);
						}
					});
				}
			});
		},
		async submitForm() {
			// 表单验证
			if (!this.name) {
				uni.showToast({
					title: '请输入姓名',
					icon: 'none'
				});
				return;
			}
			if (!this.studentNum) {
				uni.showToast({
					title: '请输入学号',
					icon: 'none'
				});
				return;
			}
			if (!this.student_card_pic) {
				uni.showToast({
					title: '请上传证件照片',
					icon: 'none'
				});
				return;
			}

			let obj = {
				name: this.name,
				studentNum: this.studentNum,
				student_crad_pic: this.student_card_pic,
				users_id: uni.getStorageSync("userInfo").id
			}
			applyAdd(obj).then(res => {
				if(res.data.status === 0) {
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					});
					
					//修改成功后 更新本地用户信息
					let info = uni.getStorageSync('userInfo');
					let userInfo = {
						...info,
						studentNum: this.studentNum,
						student_crad_pic: this.student_card_pic,
						users_id: uni.getStorageSync("userInfo").id
					}
					
					uni.setStorageSync('userInfo', userInfo);
					// 成功后跳转到首页
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1500)
				} else {
					uni.showToast({
						title: '提交失败',
						icon: 'none'
					});
				}
			}).catch(err => {
				uni.showToast({
					title: '提交失败',
					icon: 'none'
				});
				console.error('提交申请失败：', err);
			})
		}
	}
}
</script>

<style>
	.container {
		padding: 20rpx;
	}

	.refresh-icon {
		text-align: center;
		margin: 20rpx 0;
	}

	.help-btn {
		background-color: #f0f6ff;
		color: #4a90e2;
		margin: 20rpx 0;
	}

	.form-item {
		margin: 20rpx 0;
		display: flex;
		align-items: center;
	}

	.upload-box {
		border: 1px dashed #999;
		padding: 40rpx;
		text-align: center;
		margin: 20rpx 0;
	}

	.preview-image {
		width: 100%;
		height: 200rpx;
	}

	.copy-btn {
		background-color: #f0f6ff;
		color: #4a90e2;
		margin: 20rpx 0;
	}

	.agreement {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}

	.submit-btn {
		background-color: #4a90e2;
		color: white;
		margin-top: 40rpx;
	}

	.status-message {
		text-align: center;
		padding: 40rpx;
	}

	.success-message {
		color: #67C23A;
		font-size: 32rpx;
		font-weight: 500;
	}

	.error-message {
		color: #F56C6C;
		font-size: 28rpx;
		text-align: center;
		margin: 20rpx 0;
	}

	.info {
		padding: 30rpx;
		background-color: #fff;
		border-radius: 12rpx;
		margin: 20rpx;
	}

	.info-title {
		text-align: center;
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 30rpx;
	}

	.info-item {
		margin: 20rpx 0;
		line-height: 1.5;
	}

	.status-tag {
		background-color: #2fadd3;
		color: #fff;
		padding: 4rpx 12rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.student-card-img {
		width: 100%;
		margin-top: 10rpx;
		border-radius: 8rpx;
	}

	.body {
		padding: 30rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.form-section {
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.form-item {
		margin: 30rpx 0;
		display: flex;
		align-items: center;
	}

	.form-item text {
		width: 140rpx;
		font-size: 28rpx;
		color: #333;
	}

	.form-item input {
		flex: 1;
		height: 80rpx;
		background: #f5f7fa;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.upload-section {
		margin: 40rpx 0;
	}

	.upload-section text {
		font-size: 28rpx;
		color: #333;
		display: block;
		margin-bottom: 20rpx;
	}

	.upload-box {
		border: 2rpx dashed #dcdfe6;
		border-radius: 8rpx;
		padding: 60rpx 0;
		text-align: center;
		background: #f5f7fa;
	}

	.upload-box text {
		color: #909399;
		font-size: 28rpx;
	}

	.preview-image {
		width: 100%;
		height: 300rpx;
		border-radius: 8rpx;
		margin-top: 20rpx;
	}

	.submitBtn {
		margin-top: 60rpx;
		background: #409eff;
		color: #fff;
		border-radius: 8rpx;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
	}

	.info {
		margin: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.info view {
		margin: 20rpx 0;
		font-size: 28rpx;
		color: #606266;
	}

	.status-tag {
		display: inline-block;
		padding: 4rpx 16rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		margin-left: 20rpx;
		background: #e6f7ff;
		color: #1890ff;
	}

	.student-card-img {
		width: 100%;
		margin-top: 20rpx;
		border-radius: 8rpx;
	}
</style>